<template>
    <el-form ref="loginFrom" :model="smsFormData" status-icon :rules="smsRules" label-width="60px"
        class="demo-smsFormData">

        <el-form-item label="手机号" prop="phone" class="captcha-item ha">
            <el-input class="captcha-content" v-model="smsFormData.phone" maxlength="11" />
            <span class="ah"><b @click="sendSms">{{ desc }}</b></span>
        </el-form-item>

        <el-form-item label="验证码" prop="code" class="username-from-item">
            <el-input v-model="smsFormData.code" type="text" autocomplete="off" maxlength="6"
                @keydown.enter="submitForm(loginFrom)" />
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="submitForm(loginFrom)" class="submit-style">提交</el-button>
        </el-form-item>
    </el-form>
</template>
  
  
<script setup>
import { reactive, ref, onUnmounted } from 'vue'
// 引入校验函数
import { smsRules, useSubmitForm } from "../../composition/login/validate";
// 引入请求
import * as api from "../../api/users"
// 引入路由对象
import { useRouter } from "vue-router"
// 引入消息提示
import { ElMessage, ElLoading } from 'element-plus'
// 引入 store
import { userUser } from "@/store/users.js"


// 使用路由
let router = useRouter()

// 使用store
let useStore = userUser()

// 业务

// 1. 注入到表单的数据以及prop


// 2.给smsLogin这个组件添加自己的 校验规则

// 表单校验成功后 回调的方法

let loadingInstance = null;

let validateSuccess = async () => {
    // console.log("校验成功");
    // 在发起登录请求时 就要加载 loading登入动画
    loadingInstance = ElLoading.service({
        lock: true,
        text: "登录中..."
    })

    // 获取短信登入的请求
    try {
        let res = await api.smsLoginApi(smsFormData.code)
        // 关闭loading加载动画
        loadingInstance.close()
        // console.log(res);
        // 存储 token
        sessionStorage.setItem("data", res.data.token)
        // 存储用户信息
        useStore.$patch({ userInfo: res.data.userInfo })

        // 登入后跳转
        router.push("/")
    } catch (e) {
        console.log(e);
        // 登录失败也要关闭loading加载动画
        loadingInstance.close()
    }

}

onUnmounted(() => {
    loadingInstance && loadingInstance.close()
})

// 表单校验失败  回调的方法

let validateFailed = () => {
    console.log("校验失败");

}

// 使用useSubmitForm
let submitForm = useSubmitForm(validateSuccess, validateFailed)

const loginFrom = ref()

const smsFormData = reactive({
    phone: '',
    code: ''
})

// 短信输入流程
// 1.输入手机号，点击发送按钮，获取短信验证码
// 在点击后 短信验证码需要进入倒计时提示
// 同一个手机 一分钟发一次 一天一个手机号只能发六次

// 防抖
// 设置开关
let isClick = false

let desc = ref("点击发送")

let sendSms = async () => {
    // 当 开关为 关，运行倒计时   
    if (!isClick) {
        // 已被点击
        isClick = true
        // 发送手机验证码请求
        try {
            let res = await api.getSmsCode(smsFormData.phone)
            console.log(res);
            // 添加消息提示
            ElMessage({
                message: '短信验证码发送成功',
                type: 'success',
            })
            timeFlow(60, desc, "s后重新发送", () => {
                // 让点击状态回复到未点击
                isClick = false
            })

        } catch (e) {
            console.log(e);
            isClick = false
            // 添加消息提示
            ElMessage({
                message: '短信验证码发送失败',
                type: 'error',
            })
        }
    }
}

// 短信倒计时的方法

/**
 * 
 * @param {Number} time  倒计时事件
 * @param {Object} param   需要变更的响应式变量
 * @param {String} msg   time后面的文字描述
 * @param {Functios} cb   倒计时结束后回调的函数
 */

let timeFlow = (time, param, msg, cb) => {
    let niubi = param.value
    // 实现思路, 间隔定时器
    let count = time;
    param.value = (count + "").padStart(2, 0) + msg;
    let interval = setInterval(() => {
        count--
        // console.log(count);

        if (count <= 0) {
            clearInterval(interval)
            param.value = niubi
            // 回调传入的函数
            cb && cb()
            return
        }
        param.value = (count + "").padStart(2, 0) + msg;
    }, 1000)
}

// 2.输入短信验证码，进行登入请求   
</script>

<style lang="less">
.submit-style {
    width: 250px;
}

.ah {
    width: 125px;
    height: 40px;
    background-color: #FFFFFF;
    border-radius: 0 5px 5px 0;
    line-height: 40px;
    text-align: center;
    user-select: none;

    b {
        color: black;
        text-decoration: underline;
        cursor: pointer;
    }
}



.ha {
    .el-input__wrapper {
        border-radius: 5px 0 0 5px;
    }
}
</style>